<template>
  <view class="w-picker">
    <view
      class="mask"
      :class="{ show: showPicker }"
      @tap="maskTap"
      @touchmove.stop.prevent
      catchtouchmove="true"
    ></view>
    <view class="w-picker-cnt" :class="{ show: showPicker }">
      <view class="w-picker-hd" @touchmove.stop.prevent catchtouchmove="true">
        <!-- <view class="w-picker-btn" @tap="pickerCancel">取消</view> -->
        <!-- <view class="w-picker-btn" :style="{ color: themeColor }" @tap="pickerConfirm">确定</view> -->
        <view class="w-picker-btn">请选择</view>
        <image
          @click="pickerCancel"
          class="w-picker-close-icon"
          src="/static/image/popup-close.svg"
          mode="scaleToFill"
        ></image>
      </view>
      <view class="w-picker-view" v-if="mode == 'linkage'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column v-for="(col, colIndex) in data" :key="colIndex">
            <view class="w-picker-item" v-for="(item, index) in col" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'half'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.years" :key="index">
              {{ item }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.months" :key="index">
              {{ item }}月
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.days" :key="index">
              {{ item }}日
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.areas" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'date'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.years" :key="index">
              {{ item }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.months" :key="index">
              {{ item }}月
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.days" :key="index">
              {{ item }}日
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'yearMonth'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.years" :key="index">
              {{ item }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.months" :key="index">
              {{ item }}月
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'dateTime'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.years" :key="index">
              {{ item }}年
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.months" :key="index">
              {{ item }}月
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.days" :key="index">
              {{ item }}日
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.hours" :key="index">
              {{ item }}时
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.minutes" :key="index">
              {{ item }}分
            </view>
          </picker-view-column>
          <picker-view-column v-if="hasSecond">
            <view class="w-picker-item" v-for="(item, index) in data.seconds" :key="index">
              {{ item }}秒
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'range'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.fyears" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.fmonths" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.fdays" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
          <picker-view-column><view class="w-picker-item">-</view></picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.tyears" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.tmonths" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.tdays" :key="index">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'time'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.hours" :key="index">
              {{ item }}时
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.minutes" :key="index">
              {{ item }}分
            </view>
          </picker-view-column>
          <picker-view-column v-if="hasSecond">
            <view class="w-picker-item" v-for="(item, index) in data.seconds" :key="index">
              {{ item }}秒
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'region'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.provinces" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.citys" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
          <picker-view-column v-if="!hideArea">
            <view class="w-picker-item" v-for="(item, index) in data.areas" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'selector'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'limit'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.date" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.hours" :key="index">
              {{ item.label }}时
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.minutes" :key="index">
              {{ item.label }}分
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-view" v-if="mode == 'limitHour'">
        <picker-view
          :indicator-style="itemHeight"
          :value="pickVal"
          @change="bindChange"
          @touchstart="touchStart"
          @touchend="touchEnd"
        >
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.date" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.areas" :key="index">
              {{ item.label }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="w-picker-item" v-for="(item, index) in data.hours" :key="index">
              {{ item.label }}时
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="w-picker-bottom">
        <m-button class="demo-btn" type="primary" @click.native="pickerConfirm">确定</m-button>
      </view>
    </view>
  </view>
</template>

<script>
import provinces from './city-data/province.js';
import citys from './city-data/city.js';
import areas from './city-data/area.js';
import initPicker from './w-picker.js';
function oneOf(value, validList) {
  for (let i = 0; i < validList.length; i++) {
    if (value === validList[i]) {
      return true;
    }
  }
  throw new Error('mode无效，请选择有效的mode!');
  return false;
}
export default {
  data() {
    return {
      result: [],
      data: {},
      checkArr: [],
      checkValue: [],
      pickVal: [],
      showPicker: false,
      resultStr: '',
      itemHeight: `height: ${uni.upx2px(88)}px;`,
      confirmFlag: true
    };
  },
  computed: {},
  props: {
    mode: {
      type: String,
      validator(mode) {
        let modeList = [
          'half',
          'date',
          'dateTime',
          'yearMonth',
          'time',
          'region',
          'selector',
          'limit',
          'limitHour',
          'range',
          'linkage'
        ]; //过滤无效mode;
        return oneOf(mode, modeList);
      },
      default() {
        return 'date';
      }
    },
    themeColor: {
      type: String,
      default() {
        return '#f5a200';
      }
    },
    startYear: {
      type: [String, Number],
      default() {
        return '1970';
      }
    },
    endYear: {
      type: [String, Number],
      default() {
        return new Date().getFullYear() + '';
      }
    },
    defaultVal: {
      type: [Array, String],
      default: ''
    },
    areaCode: {
      type: Array,
      default() {
        return null;
      }
    },
    hideArea: {
      //隐藏省市区三级联动   地区列
      type: Boolean,
      default: false
    },
    step: {
      type: [String, Number],
      default: 1
    },
    current: {
      type: Boolean,
      default: false
    },
    selectList: {
      type: Array,
      default() {
        return [];
      }
    },
    //以下参数仅对mode==limit有效
    dayStep: {
      type: [String, Number],
      default: 7
    },
    startHour: {
      type: [String, Number],
      default: 8
    },
    endHour: {
      type: [String, Number],
      default: 20
    },
    minuteStep: {
      type: [String, Number],
      default: 10
    },
    afterStep: {
      type: [String, Number],
      default: 30
    },
    disabledAfter: {
      type: Boolean,
      default: false
    },
    linkList: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: Array,
      default() {
        return null;
      }
    },
    level: {
      type: [Number, String],
      default: 2
    },
    timeout: {
      type: Boolean,
      default: false
    },
    hasSecond: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    mode() {
      this.initData();
    },
    selectList() {
      this.initData();
    },
    linkList() {
      this.initData();
    },
    defaultVal(val) {
      this.initData();
      console.log(val);
    },
    areaCode() {
      this.initData();
    },
    value() {
      this.initData();
    }
  },
  methods: {
    touchStart() {
      if (this.timeout) {
        this.confirmFlag = false;
      }
    },
    touchEnd() {
      if (this.timeout) {
        setTimeout(() => {
          this.confirmFlag = true;
        }, 500);
      }
    },
    getLinkageVal(value, flag) {
      let dval = [];
      let list = this.linkList;
      let lev = this.level;
      let arr = value;
      let k = 0;
      let checkArr = [];
      let checkValue = [];
      let resultStr = '';
      let data = [];
      switch (lev) {
        case 2:
          dval = [0, 0];
          break;
        case 3:
          dval = [0, 0, 0];
          break;
      }
      const getData = (obj, key, str) => {
        if (key < lev) {
          data.push(obj);
          if (!arr) {
            let item = obj[0];
            checkArr.push(item.label);
            checkValue.push(item.value);
            resultStr += item.label;
            if (item.children) {
              getData(item.children, (key += 1));
            }
          } else {
            obj.map((v, j) => {
              if (flag ? v.value == arr[key] : v.label == arr[key]) {
                dval[key] = j;
                checkArr.push(v.label);
                checkValue.push(v.value);
                resultStr += v.label;
                if (v.children) {
                  getData(v.children, (key += 1));
                }
              }
            });
          }
          return {
            data,
            dval,
            checkArr,
            checkValue,
            resultStr
          };
        } else {
          return false;
        }
      };
      return getData(list, k);
    },
    getRegionVal(value, useCode) {
      let province = value[0];
      let city = value[1];
      let a = 0,
        b = 0,
        c = 0,
        dval = [];
      let _this = this;
      provinces.map((v, k) => {
        if (useCode ? v.value == province : v.label == province) {
          a = k;
        }
      });
      citys[a].map((v, k) => {
        if (useCode ? v.value == city : v.label == city) {
          b = k;
        }
      });
      if (!_this.hideArea) {
        let area = value[2];
        areas[a][b].map((v, k) => {
          if (useCode ? v.value == area : v.label == area) {
            c = k;
          }
        });
        dval = [a, b, c];
      } else {
        dval = [a, b];
      }
      return dval;
    },
    useCurrent() {
      let aToday = new Date();
      let tYear = aToday.getFullYear().toString();
      let tMonth = this.formatNum(aToday.getMonth() + 1).toString();
      let tDay = this.formatNum(aToday.getDate()).toString();
      let tHours = this.formatNum(aToday.getHours()).toString();
      let tMinutes = this.formatNum(aToday.getMinutes()).toString();
      let tSeconds = this.formatNum(aToday.getSeconds()).toString();
      if (this.current || !this.defaultVal) {
        switch (this.mode) {
          case 'range':
            return [tYear + '-' + tMonth + '-' + tDay, tYear + '-' + tMonth + '-' + tDay];
            break;
          case 'date':
            return tYear + '-' + tMonth + '-' + tDay;
            break;
          case 'yearMonth':
            return tYear + '-' + tMonth;
            break;
          case 'time':
            if (this.hasSecond) {
              return (
                tHours +
                ':' +
                (Math.floor(tMinutes / this.step) * this.step).toString() +
                ':' +
                tSeconds
              );
            } else {
              return tHours + ':' + (Math.floor(tMinutes / this.step) * this.step).toString();
            }
            break;
          case 'dateTime':
            if (this.hasSecond) {
              return (
                tYear +
                '-' +
                tMonth +
                '-' +
                tDay +
                ' ' +
                tHours +
                ':' +
                (Math.floor(tMinutes / this.step) * this.step).toString() +
                ':' +
                tSeconds
              );
            } else {
              return (
                tYear +
                '-' +
                tMonth +
                '-' +
                tDay +
                ' ' +
                tHours +
                ':' +
                (Math.floor(tMinutes / this.step) * this.step).toString()
              );
            }
            break;
          default:
            return (
              tYear +
              '-' +
              tMonth +
              '-' +
              tDay +
              ' ' +
              tHours +
              ':' +
              (Math.floor(tMinutes / this.step) * this.step).toString() +
              ':' +
              tSeconds
            );
            break;
        }
      } else {
        return this.defaultVal;
      }
    },
    formatNum(num) {
      return num < 10 ? '0' + num : num + '';
    },
    maskTap() {
      this.$emit('cancel', {
        checkArr: this.checkArr,
        defaultVal: this.pickVal
      });
      this.showPicker = false;
    },
    show() {
      this.showPicker = true;
    },
    hide() {
      this.showPicker = false;
    },
    pickerCancel() {
      this.$emit('cancel', {
        checkArr: this.checkArr,
        defaultVal: this.pickVal
      });
      this.showPicker = false;
    },
    pickerConfirm(e) {
      if (!this.confirmFlag) {
        return;
      }
      switch (this.mode) {
        case 'range':
          let checkArr = this.checkArr;
          let fDateTime = new Date(checkArr[0], checkArr[1], checkArr[2]);
          let tDateTime = new Date(checkArr[3], checkArr[4], checkArr[5]);
          let dVal = this.pickVal;
          if (fDateTime > tDateTime) {
            this.checkArr = [
              checkArr[3],
              checkArr[4],
              checkArr[5],
              checkArr[0],
              checkArr[1],
              checkArr[2]
            ];
            this.pickVal = [dVal[4], dVal[5], dVal[6], 0, dVal[0], dVal[1], dVal[2]];
            this.$emit('confirm', {
              checkArr: [...this.checkArr],
              from: checkArr[3] + '-' + checkArr[4] + '-' + checkArr[5],
              to: checkArr[0] + '-' + checkArr[1] + '-' + checkArr[2],
              defaultVal: [...this.pickVal],
              result: this.resultStr
            });
          } else {
            this.$emit('confirm', {
              checkArr: [...this.checkArr],
              from: checkArr[0] + '-' + checkArr[1] + '-' + checkArr[2],
              to: checkArr[3] + '-' + checkArr[4] + '-' + checkArr[5],
              defaultVal: [...this.pickVal],
              result: this.resultStr
            });
          }
          break;
        case 'limit':
          let aTime = new Date().getTime();
          let bTime = new Date(this.resultStr.replace(/-/g, '/')).getTime();
          if (aTime > bTime) {
            uni.showModal({
              title: '提示',
              content: '选择时间必须大于当前时间',
              confirmColor: this.themeColor
            });
            return;
          }
          this.$emit('confirm', {
            checkArr: [...this.checkArr],
            defaultVal: [...this.pickVal],
            result: this.resultStr
          });
          break;
        case 'region':
        case 'linkage':
          this.$emit('confirm', {
            checkArr: [...this.checkArr],
            checkValue: [...this.checkValue],
            defaultVal: [...this.pickVal],
            result: this.resultStr
          });
          break;
        case 'selector':
          this.$emit('confirm', {
            checkArr: this.checkArr,
            defaultVal: [...this.pickVal],
            result: this.resultStr
          });
          break;
        default:
          this.$emit('confirm', {
            checkArr: [this.checkArr],
            defaultVal: [...this.pickVal],
            result: this.resultStr
          });
          break;
      }
      this.showPicker = false;
    },
    bindChange(val) {
      let _this = this;
      let arr = val.detail.value;
      let year = '',
        month = '',
        day = '',
        hour = '',
        minute = '',
        second = '',
        note = [],
        province,
        city,
        area;
      let checkArr = _this.checkArr;
      let days = [],
        months = [],
        endYears = [],
        endMonths = [],
        endDays = [],
        startDays = [];
      let mode = _this.mode;
      let col1, col2, col3, d, a, h, m;
      let xDate = new Date().getTime();
      switch (mode) {
        case 'limitHour':
          col1 = _this.data.date[arr[0]];
          col2 = _this.data.areas[arr[1]];
          col3 = _this.data.hours[arr[2]];
          if (col1.value != checkArr[0].value) {
            arr[1] = 0;
            arr[2] = 0;
            let areas = initPicker.limitHour.initAreas(col1);
            _this.data.areas = areas;
            let hours = initPicker.limitHour.initHours(col1, _this.data.areas[arr[1]]);
            _this.data.hours = hours;
          }
          if (col2.value != checkArr[1].value) {
            arr[2] = 0;
            let hours = initPicker.limitHour.initHours(col1, _this.data.areas[arr[1]]);
            _this.data.hours = hours;
          }
          d = _this.data.date[arr[0]] || _this.data.date[_this.data.date.length - 1];
          a = _this.data.areas[arr[1]] || _this.data.areas[_this.data.areas.length - 1];
          h = _this.data.hours[arr[2]] || _this.data.hours[_this.data.hours.length - 1];
          _this.checkArr = [d, a, h];
          _this.resultStr = `${d.value + ' ' + a.label + ' ' + h.label + '时'}`;
          break;
        case 'limit':
          col1 = _this.data.date[arr[0]];
          col2 = _this.data.hours[arr[1]];
          if (col1.value != checkArr[0].value) {
            let hours = initPicker.limit.initHours(
              _this.startHour,
              _this.endHour,
              _this.minuteStep,
              _this.afterStep,
              col1.value
            );
            let minutes = initPicker.limit.initMinutes(
              _this.startHour,
              _this.endHour,
              _this.minuteStep,
              _this.afterStep,
              col1.value,
              col2.value
            );
            _this.data.hours = hours;
            _this.data.minutes = minutes;
          }
          if (col2.value != checkArr[1].value) {
            let minutes = initPicker.limit.initMinutes(
              _this.startHour,
              _this.endHour,
              _this.minuteStep,
              _this.afterStep,
              col1.value,
              col2.value
            );
            _this.data.minutes = minutes;
          }
          d = _this.data.date[arr[0]] || _this.data.date[_this.data.date.length - 1];
          h = _this.data.hours[arr[1]] || _this.data.hours[_this.data.hours.length - 1];
          m = _this.data.minutes[arr[2]] || _this.data.minutes[_this.data.minutes.length - 1];
          _this.checkArr = [d, h, m];
          _this.resultStr = `${d.value + ' ' + h.value + ':' + m.value + ':' + '00'}`;
          break;
        case 'range':
          let fyear = _this.data.fyears[arr[0]] || _this.data.fyears[_this.data.fyears.length - 1];
          let fmonth =
            _this.data.fmonths[arr[1]] || _this.data.fmonths[_this.data.fmonths.length - 1];
          let fday = _this.data.fdays[arr[2]] || _this.data.fdays[_this.data.fdays.length - 1];
          let tyear = _this.data.tyears[arr[4]] || _this.data.tyears[_this.data.tyears.length - 1];
          let tmonth =
            _this.data.tmonths[arr[5]] || _this.data.tmonths[_this.data.tmonths.length - 1];
          let tday = _this.data.tdays[arr[6]] || _this.data.tdays[_this.data.tdays.length - 1];
          if (fyear != checkArr[0]) {
            arr[4] = 0;
            arr[5] = 0;
            arr[6] = 0;
            startDays = initPicker.range.initStartDays(fyear, fmonth);
            endYears = initPicker.range.initEndYears(fyear, _this.startYear, _this.endYear);
            endMonths = initPicker.range.initEndMonths(fmonth);
            endDays = initPicker.range.initEndDays(fyear, fmonth, fday, tyear, tmonth);
            _this.data.fdays = startDays;
            _this.data.tyears = endYears;
            _this.data.tmonths = endMonths;
            _this.data.tdays = endDays;
            tyear = _this.data.tyears[0];
            checkArr[3] = _this.data.tyears[0];
            tmonth = _this.data.tmonths[0];
            checkArr[4] = _this.data.tmonths[0];
            tday = _this.data.tdays[0];
            checkArr[5] = _this.data.tdays[0];
          }
          if (fmonth != checkArr[1]) {
            arr[4] = 0;
            arr[5] = 0;
            arr[6] = 0;
            startDays = initPicker.range.initStartDays(fyear, fmonth);
            endYears = initPicker.range.initEndYears(fyear, _this.startYear, _this.endYear);
            endMonths = initPicker.range.initEndMonths(fmonth);
            endDays = initPicker.range.initEndDays(fyear, fmonth, fday, tyear, tmonth);
            _this.data.fdays = startDays;
            _this.data.tyears = endYears;
            _this.data.tmonths = endMonths;
            _this.data.tdays = endDays;
            tyear = _this.data.tyears[0];
            checkArr[3] = _this.data.tyears[0];
            tmonth = _this.data.tmonths[0];
            checkArr[4] = _this.data.tmonths[0];
            tday = _this.data.tdays[0];
            checkArr[5] = _this.data.tdays[0];
          }
          if (fday != checkArr[2]) {
            arr[4] = 0;
            arr[5] = 0;
            arr[6] = 0;
            endYears = initPicker.range.initEndYears(fyear, _this.startYear, _this.endYear);
            endMonths = initPicker.range.initEndMonths(fmonth);
            endDays = initPicker.range.initEndDays(fyear, fmonth, fday, tyear, tmonth);
            _this.data.tyears = endYears;
            _this.data.tmonths = endMonths;
            _this.data.tdays = endDays;
            tyear = _this.data.tyears[0];
            checkArr[3] = _this.data.tyears[0];
            tmonth = _this.data.tmonths[0];
            checkArr[4] = _this.data.tmonths[0];
            tday = _this.data.tdays[0];
            checkArr[5] = _this.data.tdays[0];
          }
          if (tyear != checkArr[3]) {
            arr[5] = 0;
            arr[6] = 0;
            endMonths = initPicker.range.initToMonths(fyear, fmonth, fday, tyear);
            endDays = initPicker.range.initEndDays(fyear, fmonth, fday, tyear, tmonth);
            _this.data.tmonths = endMonths;
            _this.data.tdays = endDays;
            tmonth = _this.data.tmonths[0];
            checkArr[4] = _this.data.tmonths[0];
            tday = _this.data.tdays[0];
            checkArr[5] = _this.data.tdays[0];
          }
          if (tmonth != checkArr[4]) {
            arr[6] = 0;
            endDays = initPicker.range.initToDays(fyear, fmonth, fday, tyear, tmonth);
            _this.data.tdays = endDays;
            tday = _this.data.tdays[0];
            checkArr[5] = _this.data.tdays[0];
          }
          _this.checkArr = [fyear, fmonth, fday, tyear, tmonth, tday];
          _this.resultStr = `${fyear +
            '-' +
            fmonth +
            '-' +
            fday +
            '至' +
            tyear +
            '-' +
            tmonth +
            '-' +
            tday}`;
          break;
        case 'half':
          year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
          month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
          day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
          area = _this.data.areas[arr[3]] || _this.data.areas[_this.data.areas.length - 1];
          if (year != checkArr[0]) {
            months = initPicker.date.initMonths(year, _this.disabledAfter);
            days = initPicker.date.initDays(year, month, _this.disabledAfter);
            if (_this.disabledAfter) {
              arr[1] = arr[1] > months.length - 1 ? months.length - 1 : arr[1];
              arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
              month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
              day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
            }
            _this.data.days = days;
            _this.data.months = months;
          }
          if (month != checkArr[1]) {
            days = initPicker.date.initDays(year, month, _this.disabledAfter);
            arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
            day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
            _this.data.days = days;
          }
          _this.checkArr = [year, month, day, area];
          _this.resultStr = `${year + '-' + month + '-' + day + area.label}`;
          break;
        case 'date':
          year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
          month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
          day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
          if (year != checkArr[0]) {
            months = initPicker.date.initMonths(year, _this.disabledAfter);
            days = initPicker.date.initDays(year, month, _this.disabledAfter);
            if (_this.disabledAfter) {
              arr[1] = arr[1] > months.length - 1 ? months.length - 1 : arr[1];
              arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
              month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
              day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
            }
            _this.data.days = days;
            _this.data.months = months;
          }
          if (month != checkArr[1]) {
            days = initPicker.date.initDays(year, month, _this.disabledAfter);
            arr[2] = arr[2] > days.length - 1 ? days.length - 1 : arr[2];
            day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
            _this.data.days = days;
          }
          _this.checkArr = [year, month, day];
          _this.resultStr = `${year + '-' + month + '-' + day}`;
          break;
        case 'yearMonth':
          year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
          month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
          if (year != checkArr[0]) {
            if (_this.disabledAfter) {
              arr[1] = arr[1] > months.length - 1 ? months.length - 1 : arr[1];
              month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
            }
            months = initPicker.date.initMonths(year, _this.disabledAfter);
            _this.data.months = months;
          }
          _this.checkArr = [year, month];
          _this.resultStr = `${year + '-' + month}`;
          break;
        case 'dateTime':
          year = _this.data.years[arr[0]] || _this.data.years[_this.data.years.length - 1];
          month = _this.data.months[arr[1]] || _this.data.months[_this.data.months.length - 1];
          day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
          hour = _this.data.hours[arr[3]] || _this.data.hours[_this.data.hours.length - 1];
          minute = _this.data.minutes[arr[4]] || _this.data.minutes[_this.data.minutes.length - 1];
          if (year != checkArr[0]) {
            arr[2] = 0;
            days = initPicker.date.initDays(year, month);
            day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
            _this.data.days = days;
          }
          if (month != checkArr[1]) {
            arr[2] = 0;
            days = initPicker.date.initDays(year, month);
            day = _this.data.days[arr[2]] || _this.data.days[_this.data.days.length - 1];
            _this.data.days = days;
          }
          if (_this.hasSecond) {
            second =
              _this.data.seconds[arr[5]] || _this.data.seconds[_this.data.seconds.length - 1];
            _this.checkArr = [year, month, day, hour, minute, second];
            _this.resultStr = `${year +
              '-' +
              month +
              '-' +
              day +
              ' ' +
              hour +
              ':' +
              minute +
              ':' +
              second}`;
          } else {
            _this.checkArr = [year, month, day, hour, minute];
            _this.resultStr = `${year + '-' + month + '-' + day + ' ' + hour + ':' + minute}`;
          }
          break;
        case 'time':
          hour = _this.data.hours[arr[0]] || _this.data.hours[_this.data.hours.length - 1];
          minute = _this.data.minutes[arr[1]] || _this.data.minutes[_this.data.minutes.length - 1];
          if (_this.hasSecond) {
            second =
              _this.data.seconds[arr[2]] || _this.data.seconds[_this.data.seconds.length - 1];
            _this.checkArr = [hour, minute, second];
            _this.resultStr = `${hour + ':' + minute + ':' + second}`;
          } else {
            _this.checkArr = [hour, minute];
            _this.resultStr = `${hour + ':' + minute}`;
          }
          break;
        case 'linkage':
          let c1, c2, c3;
          let list = this.linkList;
          c1 = _this.data[0][arr[0]] || _this.data[0][0];
          c2 = _this.data[1][arr[1]] || _this.data[1][0];
          if (this.level == 3) {
            c3 = _this.data[2][arr[2]] || _this.data[2][0];
            if (c1.label != checkArr[0]) {
              arr[1] = 0;
              arr[2] = 0;
              _this.data[1] = list[arr[0]].children;
              _this.data[2] = list[arr[0]].children[arr[1]].children;
              c2 = _this.data[1][arr[1]] || _this.data[1][0];
              c3 = _this.data[2][arr[2]] || _this.data[2][0];
            }
            if (c2.label != checkArr[1]) {
              arr[2] = 0;
              _this.data[2] = list[arr[0]].children[arr[1]].children;
              c3 = _this.data[2][arr[2]] || _this.data[2][0];
            }
            _this.checkArr = [c1.label, c2.label, c3.label];
            _this.checkValue = [
              _this.data[0][arr[0]] ? _this.data[0][arr[0]].value : _this.data[0][0].value,
              _this.data[1][arr[1]] ? _this.data[1][arr[1]].value : _this.data[1][0].value,
              _this.data[2][arr[2]] ? _this.data[2][arr[2]].value : _this.data[2][0].value
            ];
            _this.resultStr = c1.label + c2.label + c3.label;
          } else {
            if (c1.label != checkArr[0]) {
              _this.data[1] = list[arr[0]].children;
              arr[1] = 0;
              c2 = _this.data[1][arr[1]] || _this.data[1][0];
            }
            _this.checkArr = [c1.label, c2.label];
            _this.checkValue = [
              _this.data[0][arr[0]] ? _this.data[0][arr[0]].value : _this.data[0][0].value,
              _this.data[1][arr[1]] ? _this.data[1][arr[1]].value : _this.data[1][0].value
            ];
            _this.resultStr = c1.label + c2.label;
          }
          break;
        case 'region':
          province = _this.data.provinces[arr[0]] || _this.data.provinces[0];
          city = _this.data.citys[arr[1]] || _this.data.citys[0];
          if (!_this.hideArea) {
            area = _this.data.areas[arr[2]] || _this.data.areas[0];
          }

          if (province.label != checkArr[0]) {
            _this.data.citys = citys[arr[0]] || citys[0];
            if (!_this.hideArea) {
              _this.data.areas = areas[arr[0]][0] || areas[0][0];
            }
            arr[1] = 0;
            arr[2] = 0;
            city = _this.data.citys[arr[1]] || _this.data.citys[0];
            if (!_this.hideArea) {
              area = _this.data.areas[arr[2]] || _this.data.areas[0];
            }
          }
          if (city.label != checkArr[1] && !_this.hideArea) {
            _this.data.areas = areas[arr[0]][arr[1]] || areas[0][0];
            arr[2] = 0;
            area = _this.data.areas[arr[2]] || _this.data.areas[0];
          }
          if (!_this.hideArea) {
            _this.checkArr = [province.label, city.label, area.label];
            _this.checkValue = [
              _this.data.provinces[arr[0]]
                ? _this.data.provinces[arr[0]].value
                : _this.data.provinces[0].value,
              _this.data.citys[arr[1]] ? _this.data.citys[arr[1]].value : _this.data.citys[0].value,
              _this.data.areas[arr[2]] ? _this.data.areas[arr[2]].value : _this.data.areas[0].value
            ];
            _this.resultStr = province.label + city.label + area.label;
          } else {
            _this.checkArr = [province.label, city.label];
            _this.checkValue = [
              _this.data.provinces[arr[0]]
                ? _this.data.provinces[arr[0]].value
                : _this.data.provinces[0].value,
              _this.data.citys[arr[1]] ? _this.data.citys[arr[1]].value : _this.data.citys[0].value
            ];
            _this.resultStr = province.label + city.label;
          }
          break;
        case 'selector':
          _this.checkArr = _this.data[arr[0]] || _this.data[_this.data.length - 1];
          _this.resultStr = _this.data[arr[0]]
            ? _this.data[arr[0]].label
            : _this.data[_this.data.length - 1].label;
          break;
      }
      _this.$nextTick(() => {
        _this.pickVal = arr;
      });
    },
    initData() {
      let _this = this;
      let data = {};
      let mode = _this.mode;
      let year, month, day, hour, minute, second, province, city, area;
      let col1, col2, col3;
      let dVal = [];
      switch (mode) {
        case 'linkage':
          let init;
          if (_this.value) {
            init = _this.getLinkageVal(_this.value, true);
          } else {
            init = _this.getLinkageVal(_this.defaultVal);
          }
          dVal = init.dval;
          data = init.data;
          _this.checkArr = init.checkArr;
          _this.checkValue = init.checkValue;
          _this.resultStr = init.resultStr;
          break;
        case 'region':
          if (_this.areaCode) {
            dVal = _this.getRegionVal(_this.areaCode, true);
          } else {
            dVal = _this.getRegionVal(_this.defaultVal);
          }
          if (_this.hideArea) {
            data = {
              provinces: provinces,
              citys: citys[dVal[0]]
            };
          } else {
            data = {
              provinces: provinces,
              citys: citys[dVal[0]],
              areas: areas[dVal[0]][dVal[1]]
            };
          }
          break;
        case 'selector':
          let idx = 0;
          data = [..._this.selectList];
          _this.selectList.map((v, k) => {
            if (v.label == this.defaultVal) {
              idx = k;
            }
          });
          dVal = [idx];
          break;
        case 'limit':
          data = initPicker.limit.init(
            _this.dayStep,
            _this.startHour,
            _this.endHour,
            _this.minuteStep,
            _this.afterStep,
            this.defaultVal
          );
          dVal = data.defaultVal || _this.defaultVal;
          break;
        case 'limitHour':
          data = initPicker.limitHour.init(_this.dayStep, this.defaultVal);
          dVal = data.defaultVal || _this.defaultVal;
          break;
        case 'range':
          data = initPicker.range.init(
            _this.startYear,
            _this.endYear,
            _this.useCurrent(),
            _this.current
          );
          dVal = data.defaultVal || _this.defaultVal;
          break;
        default:
          data = initPicker.date.init(
            _this.startYear,
            _this.endYear,
            _this.mode,
            _this.step,
            _this.useCurrent(),
            _this.current,
            _this.disabledAfter,
            _this.hasSecond
          );
          dVal = data.defaultVal || _this.defaultVal;
          break;
      }
      _this.data = data;
      switch (mode) {
        case 'limitHour':
          col1 = data.date[dVal[0]] || data.date[data.date.length - 1];
          col2 = data.areas[dVal[2]] || data.areas[data.areas.length - 1];
          col3 = data.hours[dVal[1]] || data.hours[data.hours.length - 1];
          _this.checkArr = [col1, col2, col3];
          _this.resultStr = `${col1.value + ' ' + col2.label + ' ' + col3.label + '时'}`;
          break;
        case 'limit':
          col1 = data.date[dVal[0]] || data.date[data.date.length - 1];
          col2 = data.hours[dVal[1]] || data.hours[data.hours.length - 1];
          col3 = data.minutes[dVal[2]] || data.minutes[data.minutes.length - 1];
          _this.checkArr = [col1, col2, col3];
          _this.resultStr = `${col1.value + ' ' + col2.value + ':' + col3.value + ':' + '00'}`;
          break;
        case 'range':
          let fYear = data.fyears[dVal[0]] || data.fyears[data.fyears.length - 1];
          let fmonth = data.fmonths[dVal[1]] || data.fmonths[data.fmonths.length - 1];
          let fday = data.fdays[dVal[2]] || data.fdays[data.fdays.length - 1];
          let tYear = data.tyears[dVal[4]] || data.tyears[data.tyears.length - 1];
          let tmonth = data.tmonths[dVal[5]] || data.tmonths[data.tmonths.length - 1];
          let tday = data.tdays[dVal[6]] || data.tdays[data.tdays.length - 1];
          _this.checkArr = [fYear, fmonth, fday, tYear, tmonth, tday];
          _this.resultStr = `${fYear +
            '-' +
            fmonth +
            '-' +
            fday +
            '至' +
            tYear +
            '-' +
            tmonth +
            '-' +
            tday}`;
          break;
        case 'half':
          year = data.years[dVal[0]] || data.years[data.years.length - 1];
          month = data.months[dVal[1]] || data.months[data.months.length - 1];
          day = data.days[dVal[2]] || data.days[data.days.length - 1];
          area = data.areas[dVal[3]] || data.areas[data.areas.length - 1];
          _this.checkArr = [year, month, day, area];
          _this.resultStr = `${year + '-' + month + '-' + day + ' ' + area.label}`;
          break;
        case 'date':
          year = data.years[dVal[0]] || data.years[data.years.length - 1];
          month = data.months[dVal[1]] || data.months[data.months.length - 1];
          day = data.days[dVal[2]] || data.days[data.days.length - 1];
          _this.checkArr = [year, month, day];
          _this.resultStr = `${year + '-' + month + '-' + day}`;
          break;
        case 'yearMonth':
          year = data.years[dVal[0]] || data.years[data.years.length - 1];
          month = data.months[dVal[1]] || data.months[data.months.length - 1];
          _this.checkArr = [year, month];
          _this.resultStr = `${year + '-' + month}`;
          break;
        case 'dateTime':
          year = data.years[dVal[0]] || data.years[data.years.length - 1];
          month = data.months[dVal[1]] || data.months[data.months.length - 1];
          day = data.days[dVal[2]] || data.days[data.days.length - 1];
          hour = data.hours[dVal[3]] || data.hours[data.hours.length - 1];
          minute = data.minutes[dVal[4]] || data.minutes[data.minutes.length - 1];
          if (_this.hasSecond) {
            second = data.seconds[dVal[5]] || data.seconds[data.seconds.length - 1];
            _this.resultStr = `${year +
              '-' +
              month +
              '-' +
              day +
              ' ' +
              hour +
              ':' +
              minute +
              ':' +
              second}`;
            _this.checkArr = [year, month, day, hour, minute, second];
          } else {
            _this.resultStr = `${year + '-' + month + '-' + day + ' ' + hour + ':' + minute}`;
            _this.checkArr = [year, month, day, hour, minute];
          }
          break;
        case 'time':
          hour = data.hours[dVal[0]] || data.hours[data.hours.length - 1];
          minute = data.minutes[dVal[1]] || data.minutes[data.minutes.length - 1];
          if (_this.hasSecond) {
            second = data.seconds[dVal[2]] || data.seconds[data.seconds.length - 1];
            _this.resultStr = `${hour + ':' + minute + ':' + second}`;
            _this.checkArr = [hour, minute, second];
          } else {
            _this.resultStr = `${hour + ':' + minute}`;
            _this.checkArr = [hour, minute];
          }
          break;
        case 'region':
          province = data.provinces[dVal[0]];
          city = data.citys[dVal[1]];
          if (!_this.hideArea) {
            area = data.areas[dVal[2]];
            _this.checkArr = [province.label, city.label, area.label];
            _this.checkValue = [province.value, city.value, area.value];
            _this.resultStr = province.label + city.label + area.label;
          } else {
            _this.checkArr = [province.label, city.label];
            _this.checkValue = [province.value, city.value];
            _this.resultStr = province.label + city.label;
          }
          break;
        case 'selector':
          _this.checkArr = data[dVal[0]] || data[data.length - 1];
          _this.resultStr = data[dVal[0]].label || data[data.length - 1].label;
          break;
      }
      _this.$nextTick(() => {
        _this.pickVal = [...dVal];
      });
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style lang="scss">
.w-picker {
  position: relative;
  z-index: 1001;
  .mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .mask.show {
    visibility: visible;
    opacity: 1;
  }
  .w-picker-cnt {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: all 0.3s ease;
    transform: translateY(100%);
    z-index: 3000;
  }
  .w-picker-cnt.show {
    transform: translateY(0);
  }
  .w-picker-hd {
    display: flex;
    align-items: center;
    padding: 0 30upx;
    height: 88upx;
    background-color: #fff;
    position: relative;
    text-align: center;
    font-size: 32upx;
    justify-content: space-between;
    .w-picker-btn {
      font-size: 30upx;
    }
  }

  .w-picker-hd:after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #EFEFEF;
    color: #EFEFEF;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
  }
  .w-picker-item {
    text-align: center;
    width: 100%;
    height: 88upx;
    line-height: 88upx;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30upx;
  }
  .w-picker-view {
    width: 100%;
    height: 476upx;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    z-index: 666;
  }
  picker-view {
    height: 100%;
  }
  // me
  .w-picker-btn{
    font-size: 34rpx;
    font-weight: 500;
  }
  .w-picker-close-icon{
    width: 52rpx;
    height: 52rpx;
  }
  .w-picker-bottom {
    background-color: #ffffff;
    padding: 20rpx 30rpx;
  }
}
</style>
